<template>
	<view>
		<!-- 轮播 -->
		<view class="lb-banner">
			<u-swiper :list="list6" @change="e => currentNum = e.current" :autoplay="false" :circular="true"
				height="750rpx" radius="0rpx" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</u-swiper>
		</view>

		<!-- 基本信息 -->
		<view class="lb-info">
			<view class="info-top">
				<view class="top-left">
					<view v-if="rowData.detail">{{rowData.detail.name || ''}}</view>
					<!-- o_type: 1, //1普通购买2自用3分享后领取4销售分享购买 -->
					<text>{{o_type==1?'待使用数量':o_type==2?'待使用数量':o_type==3?'待领取数量':o_type==4?'待销售数量':'商品份数'}}：{{rowData.num || 0}}</text>
					<text v-if="o_type==3">待领取数量：{{rowData.w_get_num || 0}}</text>
				</view>
				<view class="top-right">
					销量{{rowData.sell_num || 0}}
				</view>
			</view>
			<view class="info-centre">
				<view class="price">
					<text>¥</text>
					<text>{{rowData.price}}</text>
				</view>
			</view>
		</view>

		<!-- 富文本 -->
		<view class="lb-content">
			<u-parse v-if="rowData.detail" :content="rowData.detail.content" :tagStyle="tagStyle"></u-parse>
		</view>
		<!-- 间隔 -->
		<view style="height: 200rpx; width: 100%;">

		</view>

		<!-- 底部 -->
		<view class="lb-foot">
			<view class="foot-left">
				<view class="left-item" @click="goTo('/pages/home/home')">
					<view class="f-icon">
						<image src="/static/icon/home.png" mode=""></image>
					</view>
					<view class="f-label">
						首页
					</view>
				</view>
			</view>

			<view class="foot-right">
				<view class="f-price">
					<text>{{rowData.price}}</text>
				</view>
				<view class="f-btn" @click="clickBuy()">
					{{o_type==1||o_type==4?'立即购买':'立即领取'}}
				</view>
			</view>
		</view>
		<loginPop></loginPop>
	</view>
</template>

<script>
	import {
		channelGoodsDetail,
		getSave
	} from '@/api/apis/comm.js'
	import {
		channelBuy,
		addCarApi,
		travelAddOrder,
		beautifyAddOrder,
		xmyAddOrder
	} from '@/api/apis/wash.js'
	import {
		setImgUrl
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				id: 0,
				currentNum: 0,
				list6: [],
				rowData: {},
				tagStyle: {
					p: 'font-size:24rpx;line-height: 46rpx;color: #999999;',
					span: 'font-size: 20rpx;line-height: 40rpx;color: #999999;',
					img: 'widht:100%'
				},
				content: ``,
				o_type: 1, //1普通购买2自用3分享后领取4销售分享购买
				sid: '',
				giveid: ''
			}
		},
		onShareAppMessage: function(res) {},
		onShareTimeline: function(res) {},
		methods: {
			lingqu() {
				uni.showModal({
					title: '提示',
					placeholderText: '请输入分享验证码',
					editable: true,
					success: (res) => {
						if (res.confirm) {
							getSave({
								sid: this.sid,
								code: res.content,
								g_id: this.giveid
							}).then(res => {
								if (res.code == 1) {
									this.$u.toast('领取成功!');
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1500)
								}

							})
						}
					}
				});

			},
			//购买
			clickBuy() {
				if (this.o_type == 3) {
					this.lingqu()
					return
				} else if (this.o_type == 4) {
					this.cardYhq({
						type_id: this.rowData.type_id,
						goods_id: this.rowData.id,
					})
					return
				}
				let _this = this;
				uni.showLoading({
					title: "提交中",
					mask: true
				});
				channelBuy({
					id: this.rowData.id,
					o_type: this.o_type
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						if (this.rowData.price == 0) {
							uni.showToast({
								title: "领取成功",
								icon: "none"
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						} else {
							uni.navigateTo({
								url: '/pages/channel/order-payment/order-payment?id=' + res.data +
									'&o_type=' + this.o_type
							})
						}

					}

				})
			},
			cardYhq(item) {
				// type_id1洗护2家居3回收4丽人美容5礼盒
				if (item.type_id == 1) {
					uni.showLoading({
						title: "提交中",
						mask: true
					});
					addCarApi({
						goods_id: item.goods_id,
						type: 1,
						is_channel: 1
					}).then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							uni.navigateTo({
								url: '/pages/xi-hu/clothes-basket/clothes-basket'
							})
						}

					})
				} else if (item.type_id == 2) {
					uni.showLoading({
						title: "提交中",
						mask: true
					});
					travelAddOrder({
						goods_id: item.goods_id,
					}).then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							uni.navigateTo({
								url: '/pages/jia-kao/order-payment/order-payment?id=' + res.data
									.order_id
							})
						}

					})
				} else if (item.type_id == 3) {

				} else if (item.type_id == 4) {
					uni.showLoading({
						title: "提交中",
						mask: true
					});
					beautifyAddOrder({
						goods_id: item.goods_id,
					}).then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							uni.navigateTo({
								url: '/pages/mei-rong/order-payment/order-payment?id=' + res.data
									.order_id
							})
						}

					})
				} else if (item.type_id == 5) {
					uni.showLoading({
						title: "提交中",
						mask: true
					});
					xmyAddOrder({
						goods_id: item.goods_id,
					}).then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							uni.navigateTo({
								url: '/pages/xmy/order-payment/order-payment?id=' + res.data
									.order_id
							})
						}

					})
				}
			},
			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			getData() {
				uni.showLoading({
					title: '请求中',
					mask: true
				});
				channelGoodsDetail({
					id: this.id,
					o_type: this.o_type
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.list6 = [];
						if (res.data.detail) {
							let imgArr = res.data.detail.goods_images.split(',');
							imgArr.forEach((val, key) => {
								this.list6.push(setImgUrl(val));
							})
						}

						this.rowData = res.data;
					}
				})
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.o_type = options.type;
			this.sid = options.sid;
			this.giveid = options.giveid;
		},
		onShow() {
			this.getData();
		}
	}
</script>

<style lang="scss">
	button::after {
		border: none;
	}

	button {
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
	}

	button:hover {
		background: none;
	}

	.lb-banner {
		width: 100%;
		height: 750rpx;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(23, 23, 23, 0.1);
		width: 70rpx;
		height: 40rpx;
		border-radius: 24rpx;
		@include flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;

		&__text {
			color: #333333;
			font-size: 12px;
		}
	}

	//基本信息
	.lb-info {
		width: 100%;
		height: 196rpx;
		background-color: $main-bg-color;
		padding: 32rpx;
		box-sizing: border-box;



		.info-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.top-left {
				font-size: $main-font-28;
				font-weight: bold;
				color: $main-font-color;

				text {
					font-size: $main-font-24;
					font-weight: 400;
					color: $main-font-color-grey6;
					padding-right: 20rpx;
				}
			}

			.top-right {
				font-size: $main-font-24;
				font-weight: 400;
				color: $main-font-color-grey6;
			}
		}



		.info-centre {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 12rpx 0;

			.price {
				// display: flex;
				// flex-direction: row;
				// align-items: flex-end;

				text {
					font-size: $main-font-28;
					font-weight: 400;
					color: #666666;

					&:nth-of-type(2) {
						font-size: $main-font-20;
						color: #00D26E;
						padding: 0 6rpx 0 12rpx;

					}

					&:nth-of-type(3) {
						font-size: $main-font-36;
						color: #00D26E;
					}
				}
			}

			.vip-price {
				display: flex;
				flex-direction: row;
				padding-left: 12px;

				image {
					width: 92rpx;
					height: 36rpx;
				}

				text {
					font-size: $main-font-28;
					font-weight: 400;
					color: #7C562D;
					padding-left: 6rpx;
				}
			}
		}



		.info-foot {
			font-size: $main-font-20;
			font-weight: 400;
			color: $main-font-color-grey9;
			text-decoration: line-through;
		}

	}

	//富文本
	.lb-content {
		margin-top: 24rpx;
		background-color: $main-bg-color;
		padding: 24rpx;
		box-sizing: border-box;
	}

	//底部
	.lb-foot {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -1rpx 0rpx rgba(0, 0, 0, 0.3);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0rpx 30rpx 0;
		box-sizing: border-box;

		.foot-left {
			display: flex;
			flex-direction: row;
			align-items: center;
			// justify-content: space-around;
			height: 134rpx;
			padding-left: 40rpx;

			.left-item {
				display: flex;
				flex-direction: column;

				&:nth-of-type(2) {
					padding-left: 72rpx;
				}



				.f-icon {
					width: 48rpx;
					height: 48rpx;
				}

				.f-label {
					padding-top: 8rpx;
					font-size: $main-font-20;
					font-weight: 400;
					color: #171717;
				}
			}
		}


		.foot-right {
			flex: 1;
			height: 134rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;


			.f-price {
				padding-right: 12rpx;

				text {
					font-size: $main-font-36;
					font-weight: bold;
					color: #F65D40;
					opacity: 1;

					&:before {
						content: '¥ ';
						font-size: $main-font-20;
						font-weight: 400;
					}
				}
			}

			.f-btn {
				width: 180rpx;
				height: 80rpx;
				border-radius: 44rpx;
				background: linear-gradient(133deg, #F7583F 0%, #F28F4C 100%);
				line-height: 78rpx;
				text-align: center;
				font-size: $main-font-28;
				font-weight: 400;
				color: $main-font-color-white;
			}
		}
	}
</style>